<template>
  <div class="repair">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>宿舍报修</span>
          <el-button type="primary" @click="showAddDialog">提交报修</el-button>
        </div>
      </template>

      <el-table :data="repairs" style="width: 100%">
        <el-table-column prop="repairNo" label="报修单号" width="200"/>
        <el-table-column prop="type" label="报修类型"/>
        <el-table-column prop="problem" label="问题描述"/>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag
                :type="scope.row.status === '已处理' ? 'success' :
                     scope.row.status === '处理中' ? 'warning' : 'danger'"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="subTime" label="提交时间">
          <template #default="scope">
            {{ formatDate(scope.row.subTime) }}
          </template>
        </el-table-column>
      </el-table>

      <div v-if="repairs.length === 0" class="empty-state">
        <el-empty description="暂无报修记录"/>
      </div>
    </el-card>

    <!-- 添加报修对话框 -->
    <el-dialog v-model="addDialogVisible" title="提交报修" width="500px">
      <el-form :model="addForm" :rules="addRules" ref="addFormRef" label-width="100px">
        <el-form-item label="报修类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择报修类型" style="width: 100%">
            <el-option label="水电维修" value="水电维修"/>
            <el-option label="家具维修" value="家具维修"/>
            <el-option label="卫浴设施" value="卫浴设施"/>
            <el-option label="门窗维修" value="门窗维修"/>
            <el-option label="其他" value="其他"/>
          </el-select>
        </el-form-item>

        <el-form-item label="问题描述" prop="problem">
          <el-input
              v-model="addForm.problem"
              type="textarea"
              :rows="4"
              placeholder="请详细描述问题"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRepair" :loading="submitting">
          提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import request from '../../utils/request'

const repairs = ref([])
const addDialogVisible = ref(false)
const addFormRef = ref()
const submitting = ref(false)

const addForm = reactive({
  type: '',
  problem: ''
})

const addRules = {
  type: [{required: true, message: '请选择报修类型', trigger: 'change'}],
  problem: [{required: true, message: '请输入问题描述', trigger: 'blur'}]
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleString()
}

const loadRepairs = async () => {
  try {
    const response = await request.get('/api/fix/list')
    if (response.data.code === 200) {
      repairs.value = response.data.data
    }
  } catch (error) {
    console.error('加载报修记录失败:', error)
  }
}

const showAddDialog = () => {
  addForm.type = ''
  addForm.problem = ''
  addDialogVisible.value = true
}

const submitRepair = async () => {
  if (!addFormRef.value) return

  await addFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        const response = await request.post('/api/fix/add', addForm)
        if (response.data.code === 200) {
          ElMessage.success('提交成功')
          addDialogVisible.value = false
          await loadRepairs()
        }
      } catch (error) {
        ElMessage.error('提交失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

onMounted(() => {
  loadRepairs()
})
</script>

<style scoped>
.repair {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
}
</style>
